<template>
  <div class="selectHeader">
    <div class="select-wrapper">
      <div class="selectBox">
        <span class="strong">行政村选择：</span>
        <el-select
          v-model="citySelected"
          placeholder="请选择"
          @change="cityChange"
        >
          <el-option
            v-for="(item, index) in citylist"
            :key="item.id"
            :label="item.label"
            :value="index"
          />
        </el-select>
      </div>
      <slot name="downDiv"></slot>
      <slot name="upDiv"></slot>
      <div class="searchBox">
        <el-input
          v-model="inputvalue"
          size="small"
          suffix-icon="el-icon-search"
          class="einput"
          clearable
          @change="inputChange"
          @clear="keyclear"
        />
        <!-- <div class="daoButton" @click="downloadBtnHandler">
          <img src="@/assets/daochu.png" alt="" />
          <span>全部导出</span>
        </div> -->
      </div>
    </div>

    <ul class="checkArea" v-if="areaShow">
      <li
        v-for="(item, i) in cityChildren"
        :key="i"
        :class="{ active: i == currentLiIndex }"
        @click="liChange(i)"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.selectHeader {
  position: relative;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  .select-wrapper {
    position: relative;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .selectBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .strong {
      font-size: 18px;
      font-weight: 600;
      color: #4778c7;
    }
  }

  .searchBox {
    height: 100%;
    width: 350px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .einput {
      border-radius: 8px;
    }
    .daoButton {
      width: 120px;
      min-width: 120px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background-color: #4778c7;
      border-radius: 4px;
      padding: 10px;
      height: 32px;
      margin-left: 15px;
      color: #fff;
      img {
        margin-right: 5px;
        width: 25px;
        height: 25px;
      }
    }
  }
}
.checkArea {
  list-style: none;
  margin: 0;
  padding: 5px 5px;
  background-color: #f2f2f2;
  li {
    float: left;
    margin-right: 15px;
    padding: 5px 10px;
    border-radius: 3px;
    letter-spacing: 1px;
    color: #4778c7;
    font-size: 14px;
    cursor: pointer;
  }
  .active {
    background-color: #4778c7;
    color: #fff;
  }
}
</style>
<script>
import {
  mapGetters
} from 'vuex'
import { export_json_to_excel } from "@/utils/export2Excel.js";
export default {
  name: "TableHeader",
    computed: {
    ...mapGetters([
      'citylist',
    ])
  },
  data() {
    return {
      cityChildren: [],
      currentLiIndex: 1,
      city: "",
      inputvalue: "",
      country: "",
      key: "",
      areaShow: false,
      citySelected: 0,
    };
  },
  props: {
  
    filename: {
      type: String,
      default: "excel",
    },
  },
  mounted() {
    let v = false;
    this.citylist.forEach((element) => {
      if (element.label == "湖南省") {
        v = true;
      }
    });
    if (!v) {
      this.citylist.unshift({ label: "湖南省", value: 0 });
    }
  },
  methods: {
    inputChange() {
      this.key = this.inputvalue;
      this.$emit("keychange", this.key);
    },
    keyclear() {
      this.key = "";
      this.$emit("keychange", this.key);
    },
    downloadBtnHandler() {
      this.$emit("getData")
    },
    downloadExcel(tabledatalist) {
      let header = Object.keys(tabledatalist[0]);
      let list2 = [];
      for (var i = 0; i < tabledatalist.length; i++) {
        let list1 = [];
        for (var j = 0; j < header.length; j++) {
          let obj = tabledatalist[i];
          list1.push(obj[header[j]]);
        }
        list2.push(list1);
      }
      export_json_to_excel({
        header: header,
        data: list2,
        filename: this.filename,
      });
    },
    cityChange() {
      if (this.citySelected == 0) {
        this.city = null;
        this.areaShow = false;
      } else {
        this.city = this.citylist[this.citySelected].label;
        this.areaShow = true;
        this.createAreaList();
        this.currentLiIndex = 0;
      }
      this.$emit("cityChange", this.city);
    },
    createAreaList() {
      const children = this.citylist[this.citySelected];
      if (children) {
        this.cityChildren = children.children.concat([]);
        let labelvalue = { label: children.label };
        this.cityChildren.unshift(labelvalue);
      }
    },
    liChange(index) {
      this.currentLiIndex = index;
      this.country = this.cityChildren[index].label;
      this.city = this.citylist[this.citySelected].label;
      if (index == 0) {
        this.country = null;
      }
      let obj = {
        city: this.city,
        country: this.country,
      };
      this.$emit("areaChange", obj);
    },
  },
};
</script>
